<template>
  <div class="login">
    <div class="logo">
      <img src="../assets/logo.png" alt="">
    </div>
    <div class="title">
      速冻在线<br>供应商平台
    </div>
    <group label-width="70px">
      <x-input title="用户名" :max="13" required placeholder="请输入用户名" v-model="username"></x-input>
    </group>
    <group label-width="70px">
      <x-input title="密码" required placeholder="请输入密码" type="password" v-model="password"></x-input>
    </group>
    <div class="remanber">
      <x-button class="sub_btn" type="primary" @click.native="login">登录</x-button>
      <router-link to="a">忘记密码？</router-link>
    </div>
    <div class="add">
      <x-button @click.native="register" type="warn">申请入驻</x-button>
    </div>
  </div>
</template>

<script>
import { XInput, Group, XButton } from "vux";
import router from "../router";
export default {
  name: "Login",
  data() {
    return {
      username: "",
      password: ""
    };
  },
  methods: {
    login() {
      var that = this;
      if (this.username == "") {
        that.$vux.toast.show({
          text: "用户名不能为空",
          type: "warn"
        });
        return;
      }
      if (this.password == "") {
        that.$vux.toast.show({
          text: "密码不能为空",
          type: "warn"
        });
        return;
      }
      this.$http
        .post("/api/supplier.login/index", {
          username: this.username,
          password: this.password
        })
        .then(function(res) {
          if (res.data.data.auth_token) {
            localStorage.clear();
            localStorage.setItem("userData", JSON.stringify(res.data.data));
          }
          if (res.data.code == 1) {
            router.push({ name: "order" });
            that.$vux.toast.show({
              text:res.data.msg
            });
          }else{
            that.$vux.toast.show({
              text:res.data.msg,
              type:'warn'
            });
          }
        });
    },
    register() {
      router.push({ name: "register" });
    }
  },
  created: function() {},
  components: {
    XInput,
    Group,
    XButton
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.logo {
  background-color: white;
  width: 120px;
  height: 120px;
  overflow: hidden;
  border-radius: 50%;
  margin: 20px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    width: 85%;
  }
}
.title {
  text-align: center;
  font-size: 24px;
}
.remanber {
  padding: 20px 15px;
  border-bottom: solid 1px #ddd;
  .sub_btn {
    margin-bottom: 10px;
  }
}
.add {
  padding: 20px 15px;
}
</style>
